body {
	min-width: 100%;
	min-height: 100%;
	width: 100%;
    height: 100%;
    /* This is to disable accidental highlighting of survey text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media all and (max-width: 340px) {
    /*
    This media query prevents spillover in the header.
    */
    .odk-header {
        font-size: .7em;
    }
    .odk-footer {
        font-size: .7em;
    }
}
.odk-screen {
	min-height: inherit;
	min-width: inherit;
}
.odk-header {
	overflow: hidden;
	clear: both;
}
.odk-scroll {
	clear: both;
	width: inherit;
}
.odk-footer {
	position: fixed;
	bottom: 0%;
	overflow: hidden;
	clear: both;
}
.odk-container {
    padding: 0;
    padding-left: 1em;
    padding-right: 1em;
}
.headerNavBtns {
    float: right;
    /* margin-right: 1em; */
}
.footerNavBtns {
    float: right;
    /* margin-right: 1em; */
}
.odk-options-btn {
    float: left;
}
/*
Orangy glow.
Eventually we should make a jqm theme for this.
*/
.ui-input-text.ui-focus, .ui-input-search.ui-focus {
    -moz-box-shadow: 1px 1px 12px 			rgb(255, 194, 0);
	-webkit-box-shadow: 1px 1px 12px 		rgb(255, 194, 0);
	box-shadow: 1px 1px 12px 				rgb(255, 194, 0);
}

#screenPopup > .message {
    font-weight: bold;
}

#block-ui {
    display: none;
    cursor: wait;
    position: absolute;
    top: 0;
    left: 0;  
    width: 100%;
    height: 100%;
    z-index: 1000; 
    background-color: #fff;
    opacity: 0.5;
}

.odk-label {
    font-size: larger;
}
.odk-hint {
    font-style: italic;
}
.inline-label-container {
    float:left;
    width:33%;
}
.inline-label-container > :first-child {
    margin-top: .5em;
}

/* Deselct button styles: */
.deselect {
    float: right;
}
.inline-deselect {
    /* Add media query for small screens? */
    margin-top: 0;
    float:left;
}

/* Grid select styles: */
.grid-select-item {
    /*
    The height is a trade-off, we get a better looking regular grid with it set,
    but we loose the ability auto-fit arbitrary sized content.
    Maybe I could use a table to get the best of both worlds.
    */
    height: 120px;
    margin: 2px;
    padding: 3px;
}
.grid-select-item:active {
    border: 1px solid 		#aaa /*{d-bdown-border}*/;
	background: 			#eee /*{d-bdown-background-color}*/;
	font-weight: bold;
	color: 					#333 /*{d-bdown-color}*/;
	text-shadow: 0 /*{d-bdown-shadow-x}*/ 1px /*{d-bdown-shadow-y}*/ 0 /*{d-bdown-shadow-radius}*/ 	#fff /*{d-bdown-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #e5e5e5 /*{d-bdown-background-start}*/), to( #f2f2f2 /*{d-bdown-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/);
}

.ui-btn-text {
    padding: .5em;
}

.odk-formlogo {
    width: 50%;
}
.odk-label-image {
    width: 100%;
}

/*
Below are some font-size resets meant to allow global font-size settings on the body.
As font size is increased it will cause the header bar overtake the content.
It may be best to set the view-port scale instead of messing with the jQm styles.
*/
.ui-btn-text {
    font-size: 1em;
}
.ui-btn-inner {
    font-size: 1em;
}
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner {
    font-size: 1em;
}
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label {
    font-size: 1em;
}
